<template>
  <div>
    <el-dialog
      title="事件中心"
      :visible.sync="dialogVisible"
      width="1200px"
      height="800px"
      :modal="false"
      custom-class="deep"
      @close="closeDialog"
    >
      <div class="eventCenterContainer">
        <!-- 事件类型选择 -->
        <div class="eventDrop">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ seldrop }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="item.value"
                v-for="(item, index) in dropdown"
                :key="index"
                >{{ item.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <div class="date">
          <el-date-picker
            v-model="defaultRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleChange"
          >
          </el-date-picker>
        </div>

        <el-row>
          <el-col :span="12" v-for="(item, index) in set" :key="index">
            <p class="name">{{ item.name }}</p>
            <span class="value">{{ item.value }}</span>
            <span class="type">个</span>
          </el-col>
        </el-row>

        <el-table
          :data="tableData"
          style="width: 100%"
          height="500px"
          :lazy="true"
          @row-click="rowClick"
        >
          <el-table-column prop="source" label="事件来源"> </el-table-column>
          <el-table-column prop="eventDesc" label="事件描述"> </el-table-column>
          <el-table-column prop="occurLocation" label="发生地址">
          </el-table-column>
          <el-table-column prop="reportTime" label="发生时间">
          </el-table-column>
          <el-table-column prop="status" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === '已办结'" class="done">{{scope.row.status}}</span>
          <span v-else class="process">{{scope.row.status}} <img src="../../assets/image/left/yzqj.png" width="25px" height="25px" @click.stop="processImgClick(scope.row)" /> </span>
              <!-- <span
                :class="scope.row.status === '已办结' ? 'done' : 'process'"
                >{{ scope.row.status }}</span
              > -->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
 <script>
import { getTownEventCenter } from "../../utils/api";
export default {
  name: "eventCenterDetails",
  data() {
    return {
      dialogVisible: false,
      defaultRange: [],
      set: [
        {
          name: "处理中",
          value: "0",
        },
        {
          name: "已完成",
          value: "0",
        },
      ],

      tableData: [],
      startTime: this.Tebs.getBeforeDate(29) + " 00:00:00",
      endTime: this.Tebs.date2String_OnlyDate(new Date()) + " 23:59:59",
      dialogVisible: false,

      // yhadd
      dropdown: [
        {
          name: "全部",
          value: "all",
        },
        {
          name: "矛调协同平台",
          value: "type1",
        },
        {
          name: "基层治理四平台",
          value: "type2",
        },
        {
          name: "浙里访",
          value: "type3",
        },
        {
          name: "村情通",
          value: "type4",
        },
        {
          name: "邻礼通",
          value: "type5",
        },
        {
          name: "政企通",
          value: "type6",
        },
        {
          name: "掌上指挥",
          value: "type7",
        },
        {
          name: "其他",
          value: "other",
        },
      ],
      seldrop: "全部",
      isShowHandheld: false,
      source: null,
      sourceId: null,
      isShowHandheld1: false,
      showUrl: null,
    };
  },

  mounted() {
    window.eventCenterDetailsInit = this.eventCenterDetailsOpen;
    this.defaultRange = [this.startTime, this.endTime];
  },
  methods: {
    eventCenterDetailsOpen() {
      this.dialogVisible = true;
      this.getData();
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handleChange(value) {
      this.startTime = this.Tebs.date2String_OnlyDate(value[0]) + " 00:00:00";
      this.endTime = this.Tebs.date2String_OnlyDate(value[1]) + " 23:59:59";
      this.getData();
    },
    getData() {
      let me = this;
      getTownEventCenter(
        "startTime=" + this.startTime + "&endTime=" + this.endTime
      ).then((res) => {
        if (res.data.status === 200) {
          me.set[0].value = res.data.data.process;
          me.set[1].value = res.data.data.done;
          me.tableData = [];
          me.tableData = JSON.parse(JSON.stringify(res.data.data.list));
          for (let i = 0, l = me.tableData.length; i < l; i++) {
            me.tableData[i].status =
              me.tableData[i].status === "process" ? "处理中" : "已办结";
          }
        }
      });
    },
    // 每一行点击时触发
    rowClick(row) {
      if (row.source === "掌上指挥") {
        this.handleHeld(row);
      } else {
        window.eventDialogInit(row);
      }
    },

    handleHeld(params) {
      if (params.source === "掌上指挥" && params.palmFlag === 1) {
        this.isShowHandheld1 = true;

        this.showUrl = params.showUrl;
        window.zszhInit(this.showUrl);
      } else {
        this.isShowHandheld = true;
        this.source = params.source;
        this.sourceId = params.sourceId;
        window.handeldCommandInit(this.source, this.sourceId);
      }
    },
    // 处理中的事件点击
    processImgClick(info){
      this.handleHeld(info);
    },
    handleCommand(command) {
      for (let i = 0, l = this.dropdown.length; i < l; i++) {
        if (command === this.dropdown[i].value) {
          this.seldrop = this.dropdown[i].name;
        }
      }
      let me = this;
      var temseldrop = this.seldrop;
      if (this.seldrop == "全部") {
        temseldrop = "";
      }

      getTownEventCenter(
        "startTime=" +
          this.startTime +
          "&endTime=" +
          this.endTime +
          "&source=" +
          temseldrop
      ).then((res) => {
        if (res.data.status === 200) {
          me.tableData = JSON.parse(JSON.stringify(res.data.data.list));
          for (let i = 0, l = me.tableData.length; i < l; i++) {
            me.tableData[i].status =
              me.tableData[i].status === "process" ? "处理中" : "已办结";
          }
        }
      });
    },

    isCloseForm(value) {
      this.isShowHandheld = value;
    },

    handleReport(url) {
      console.log(url, "url");
      this.showUrl = url;
      this.isShowHandheld1 = true;
    },
  },
};
</script>
 <style rel="stylesheet/scss" scoped>
.el-range-editor {
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  opacity: 0.8;
  width: 94%;
  margin-left: 3%;
  margin-top: 5px;
}

.el-row {
  width: 100%;
  margin-top: 5px;
}
.el-col-12 {
  width: 200px;
  height: 52px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 20px;
  margin-top: 10px;
  font-size: 16px;
  padding-left: 20px;
  line-height: 24px;
}
.el-col-12:nth-child(1) {
  background-image: url("../../assets/image/left/set1.png");
}
.el-col-12:nth-child(2) {
  background-image: url("../../assets/image/left/set2.png");
}
.name {
  color: #b4e0f0;
}
.value {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}
.el-col-12:nth-child(1) .type {
  color: #02b7fa;
}
.el-col-12:nth-child(2) .type {
  color: #02fa48;
}
.type1 {
  color: #f33838;
}
.type2 {
  color: #01decc;
}
.el-table {
  background: unset;
  margin-top: 5px;
  font-size: 18px;
}
.done {
  color: rgb(26, 248, 187);
}
.process {
  color: rgb(24, 159, 249);
}
/* yhadd */
.eventCenterContainer {
  position: relative;
}
.eventDrop {
  position: absolute;
  right: 35px;
  top: 60px;
  z-index: 2222;
}
.el-dropdown {
  width: 170px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  color: #fff;
  padding-left: 20px;
  box-sizing: border-box;
  background: linear-gradient(
    0deg,
    rgba(22, 79, 58, 0.7),
    rgba(5, 35, 29, 0.7)
  );
  border: 1px solid #0affbd;
  box-shadow: 0px 0px 8px 0px rgba(2, 45, 33, 0.46);
  border-radius: 1px;
}
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
.dialogT {
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  color: #7af3ff;
}
.btn-item-wrap {
  display: flex;
  text-align: center;
  justify-content: flex-end;
  color: white;
}
.btn-item {
  margin-right: 30px;
}
.btn-item + .btn-item {
  margin-right: 50px;
}
</style>
 <style >
.el-step__description.is-finish {
  color: #7af3ff;
}
.el-dialog__title {
  color: #7af3ff;
  font-size: 16px;
}
.el-dialog__headerbtn {
  top: 40px;
}
.el-step__title.is-finish {
  color: #7af3ff;
  font-size: 14px;
}
.el-dialog {
  background: rgba(0, 17, 47, 0.8);
}
.el-step__title.is-process {
  color: rgba(255, 255, 255, 0.8);
}
.el-step__description.is-process {
  color: rgba(255, 255, 255, 0.8);
}
</style>>

